<template>
<div>
  <el-row :gutter="10">
    <el-col :span="8">
      <el-card>
        <div>
          <el-form ref="form"  :model="form" label-width="80px">
            <div style="height: 50px">
              <el-select v-model="form.exam" placeholder="请选择考试" filterable  >
                <el-option v-for="exam in exams"  :label="exam.name" :value="exam.name"></el-option>
              </el-select>
            </div>
            <div style="height: 50px">
              <el-select v-model="form.grade" placeholder="请选择年级">
                <el-option v-for="grade in grades"  :label="grade.name" :value="grade.name"></el-option>
              </el-select>
            </div>
            <div style="height: 50px">
              <el-select v-model="form.class1" placeholder="请选择班级">
                <el-option v-for="class1 in classes"  :label="class1 .name" :value="class1.name"></el-option>
              </el-select>
            </div>
            <div style="height: 50px">
              <el-select v-model="form.subject" :disabled="isTeacher" :placeholder=this.form.subject>
                <el-option v-for="subject in subjects"  :label="subject.name" :value="subject.name"></el-option>
              </el-select>
            </div>
          </el-form>
        </div>
      </el-card>
    </el-col>
    <el-col :span="16">
      <el-card  >
        <div style="width: 100%;height: 400px" id="line2"></div>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<script>
import * as echarts from 'echarts';
const option2 ={
  title: {
    text: '教师在线阅卷系统学生成绩分析',
    subtext: ' 2024上半学期第一次月考   科目：语文    年级：高二',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '70-80' },
        { value: 735, name: '80-90' },
        { value: 580, name: '60以下' },
        { value: 484, name: '60-70' },
        { value: 30, name: '90-100' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
    }
;
export default {
  name: "echarts",
  data(){
    return{
      isTeacher:'ture',
      exams:[
        {name:'2024上半学年第一次月考',id:1},
        {name:'2024上半学年第二次月考',id:2},
        {name:'2024上半学年期中考试',id:3},
        {name:'2024上半学年六省联考',id:4},
        {name:'2023下半学年期末考试',id:5},
        {name:'2023下半学年期中考试',id:6},
        {name:'2023下半学年第三次月考',id:7},
        {name:'2023下半学年第二次月考',id:8},
        {name:'2023下半学年第一次月考',id:9},
      ],
      grades:[
        {name:'2021级'},
        {name:'2022级'},
        {name:'2023级'},
      ],
      classes:[
        {name:'全年级学生'},
        {name:'1班'},
        {name:'2班'},
        {name:'3班'},
        // {name:this.form.grade+'4班'},
      ],
      subjects:[
        {name:'语文'},
        {name:'数学'},
        {name:'英语'},
        {name:'物理'},
        {name:'化学'},
        {name:'生物'},
        {name:'政治'},
        {name:'历史'},
        {name:'地理'},

      ],
      form:{
        exam:'',
        grade:'',
        class1:'',
        subject:'语文'
      }
    }
  },
  mounted() {
    let chartDom2 = document.getElementById('line2');
    let myChart2 = echarts.init(chartDom2);
    option2 && myChart2.setOption(option2);
  }
}
</script>

<style scoped>

</style>